<template>
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
import { getStockUseStatus } from '@/api/dashboard'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
export default {
  data () {
    return {
      echartsDate: []
    }
  },
  methods: {
    async setEcharts () {
      await this.getStockUseStatus()
      const chart = echarts.init(this.$refs.myDiv)
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        color: ['RGB(220,210,209)', 'RGB(255,187,0)'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartsDate
          }
        ]
      }
      )
    },
    async getStockUseStatus () {
      const { data } = await getStockUseStatus()
      this.echartsDate = data
    }
  },
  created () {
    this.setEcharts()
  },
  mounted () {
    // console.log(this.echartsDate)
    // const chart = echarts.init(this.$refs.myDiv)
    // chart.setOption({
    //   series: [
    //     {
    //       name: 'Access From',
    //       type: 'pie',
    //       radius: ['50%', '70%'],
    //       avoidLabelOverlap: false,
    //       label: {
    //         show: false,
    //         position: 'center'
    //       },
    //       emphasis: {
    //         label: {
    //           show: true,
    //           fontSize: 18
    //         }
    //       },
    //       labelLine: {
    //         show: false
    //       },
    //       data: this.echartsDate
    //     }
    //   ]
    // }
    // )
  }
}
</script>

<style scoped>
.radar-echart {
  width: 427px;
  height: 280px;
}
</style>
